<script setup>
import { reactive } from "vue";
import { ref } from "vue";
import { defineEmits } from "vue";
import { genFileId } from "element-plus";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
// 跳转页面
const jumpTo = (path) => {
  router.push(path);
};

// 登录表单
const form = reactive({
  name: "",
  scale: "",
  type: "",
  identity: "",
  license: "",
});

const upload = ref();

const handleExceed = (files) => {
  upload.value.clearFiles();
  const file = files[0];
  file.uid = genFileId();
  upload.value.handleStart(file);
};

const submitUpload = () => {
  upload.value.submit();
};

// 登录函数
const onLogin = () => {
  console.log("submit!");
};

const emit = defineEmits(["changeLoginType"]);
// 修改登录方式
const changeLoginType = (type) => {
  emit("changeLoginType", type);
};

const handleUploaded = (e) => {
  console.log(e.data.url, 888);
  form.license = e.data.url;
};

const login = async () => {
  if (form.name === "") {
    ElMessage({
      message: "请输入公司名",
      type: "success",
    });
    return;
  }
  if (form.scale === null) {
    ElMessage({
      message: "请选择企业规模",
      type: "success",
    });
    return;
  }
  if (form.type === "") {
    ElMessage({
      message: "请选择企业类型",
      type: "success",
    });
    return;
  }
  if (form.identity === "") {
    ElMessage({
      message: "请选择您的身份",
      type: "success",
    });
    return;
  }
  if (form.license === "") {
    ElMessage({
      message: "请上传营业执照",
      type: "success",
    });
    return;
  }
  try {
    const res = await axios.post(
      `${apiUrl}/user/update`,
      {
        is_first: 1,
        group_id: 6,
        company_name: form.name,
        company_size: form.scale,
        enterprise_type: form.type,
        identity: form.identity,
        business_license: form.license,
      },
      {
        headers: {
          Authorization: `Bearer ${getToken()}`, // 修正了拼写错误
        },
      }
    );
    jumpTo("/person");
  } catch (e) {
    console.error(e); // 打印错误信息
    throw e; // 抛出错误，让调用者可以捕获
  }
};
</script>

<template>
  <div class="loginBox">
    <div class="boxBg">
      <div class="title">{{ $t("loginRegist.regist") }}</div>

      <el-form :model="form" label-width="auto" label-position="left">
        <el-form-item :label="$t('loginRegist.comName')" prop="name">
          <el-input
            v-model="form.name"
            :placeholder="$t('loginRegist.fullCom')"
            class="loginInput"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('loginRegist.comNum')" prop="scale">
          <el-select
            v-model="form.scale"
            :placeholder="$t('loginRegist.placeNum')"
            style="width: 100%"
          >
            <el-option label="0-99" value="0-99" />
            <el-option label="100-199" value="100-199" />
            <el-option label="200-500" value="200-500" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('loginRegist.comType')" prop="type">
          <el-select
            v-model="form.type"
            :placeholder="$t('loginRegist.placeComType')"
            style="width: 100%"
          >
            <el-option label="国企" value="国企" />
            <el-option label="合资" value="合资" />
            <el-option label="民营" value="民营" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('loginRegist.identity')" prop="identity">
          <el-select
            v-model="form.identity"
            :placeholder="$t('loginRegist.placeIdentity')"
            style="width: 100%"
          >
            <el-option label="企业主" value="企业主" />
            <el-option label="采购人" value="采购人" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('loginRegist.license')" prop="license">
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="`https://api.zehaotarpaulin.cn/api/upload/image`"
            :on-success="handleUploaded"
            :show-file-list="true"
            :before-upload="beforeAvatarUpload"
            :headers="{ Authorization: 'Bearer ' + getToken() }"
            :with-credentials="true"
            name="pics"
            :data="{ filename: 'pics' }"
            :limit="1"
            :on-exceed="handleExceed"
            accept=".jpg,.png"
          >
            <template #trigger>
              <el-button type="primary" style="flex: 2" plain>{{
                $t("loginRegist.up")
              }}</el-button>
            </template>
          </el-upload>
        </el-form-item>
        <div class="formItem">
          <el-button type="primary" class="loginBtn" @click="login">{{
            $t("loginRegist.logBtn")
          }}</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.loginBox {
  display: flex;
  justify-content: end;

  .boxBg {
    width: 400px;
    background-color: #fff;
    padding: 30px 40px;
    border: 1px solid #ccc;
    position: absolute;
    bottom: 200px;

    .title {
      font-size: 20px;
      margin-bottom: 40px;
      // font-weight: bold;
      letter-spacing: 2px;
      text-align: center;
    }

    .loginInput {
      height: 30px;
      border-radius: 0;
      margin-bottom: 5px;
    }

    .code {
      cursor: pointer;
      width: 70px;
      text-align: center;
    }

    .formItem {
      // display: flex;
      font-size: 12px;

      .info {
        line-height: 24px;

        .agreement {
          color: #156197;
        }
      }

      .loginBtn {
        width: 100%;
        height: 40px;
        margin-top: 30px;
      }

      .changeTypeBtn {
        text-align: center;
        font-size: 14px;
        margin-top: 10px;
        cursor: pointer;
      }
    }
  }
}

::v-deep .el-input__wrapper {
  border: 0;
  box-shadow: none;
}

::v-deep .el-form-item {
  border-bottom: 1px solid #ccc;
}

::v-deep .el-input__wrapper:hover {
  box-shadow: none !important;
}

::v-deep .el-input__inner {
  text-align: right;
}

::v-deep .el-select__selected-item {
  color: #333;
  text-align: right;
}

::v-deep .el-select__selected-item.el-select__placeholder {
  color: #999;
}

::v-deep .el-select__wrapper {
  box-shadow: none !important;
}
</style>
